<template>
    <div class="search-car-bg">
        <div class="nbox" id="nbox" style="height: 4.9rem">
            <div class="index-header-box" id="head">
                <div class="index-header">
                    <div @click="cancel" class="back">
                        <van-icon name="arrow-left"/>
                    </div>
                    <div class="title">选择车辆品牌（{{active}}/3）</div>
                </div>
            </div>

            <div class="search-car-type">
                <div class="item" :class="{'active':active==1}" @click="active=1">
                    品
                    <div class="item-child">选择品牌</div>
                </div>
                <div class="hr"></div>
                <div class="item" :class="{'active':active==2}" @click="checkChoose(2)">
                    系
                    <div class="item-child">选择车系</div>
                </div>
                <div class="hr"></div>
                <div class="item" :class="{'active':active==3}" @click="checkChoose(3)">
                    款
                    <div class="item-child">选择款型</div>
                </div>
            </div>
        </div>
        <div class="search-carv2-box" v-if="active==1">
            <van-search class="search" background="none" v-model="keyword" placeholder="请输入关键字 如：大众"
                        show-action shape="round">
                <div slot="action" class="search-btn" @click="search">搜索</div>
            </van-search>

            <div class="carv2-brand-box">
                <div class="box-title">热门品牌</div>
                <div class="carv2-brand">
                    <div class="item" v-for="(item,index) in hotBrand" @click="getCarList(item)">
                        <div class="item-img">
                            <img class="img" :src="img(item.brand_logo)"/>
                        </div>
                        <div class="tit">{{item.brand}}</div>
                    </div>
                </div>
                <template v-for="(item,index) in firstArr">

                    <div class="box-title" :id="item.brand_first">{{item.brand_first}}</div>
                    <div class="carv2-brand">
                        <div class="item" v-for="(vo,key) in list" @click="getCarList(vo)"
                             v-if="item.brand_first==vo.brand_first">
                            <div class="item-img">
                                <img class="img" :src="img(vo.brand_logo)"/>
                            </div>
                            <div class="tit">{{vo.brand}}</div>
                        </div>
                    </div>

                </template>

                <div class="box-first">
                    <div class="item" v-for="(item,index) in firstArr" @click="jumps(item.brand_first)">{{item.brand_first}}</div>
                </div>
            </div>
        </div>

        <div class="search-carv2-box" v-if="active==2">
            <div class="search-car-list" @click="getCarID(0,0)" v-if="addTypes==0">
                <div class="tit" style="color:#2C8DFF;">不限车系</div>
            </div>
            <div class="carv2-brand-box">

                <div class="box-title" v-if="carBrand.brand">{{carBrand.brand}}</div>

                <div class="carv2-brand">
                    <div class="item" @click="getCarID(item.series_id,item)" v-for="(item,index) in seriesArr">
                        <div class="item-img">
                            <van-image class="img-car" lazy-load :src="img(item.thumb)">
                                <template v-slot:loading>
                                    <van-loading type="spinner" size="20"/>
                                </template>
                            </van-image>
                        </div>
                        <div class="tit">{{item.series_name}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="search-carv2-box" v-if="active==3" style="padding-top: 0">

            <div class="carv2-brand-box" style="margin-top: 0">

                <div class="search-car-list">
                    <div class="tit">
                        <a class="item-sea" :class="{'active':carActive==0}" @click="getSeaCar(0)">全部</a>
                        <a class="item-sea" :class="{'active':carActive==1}" @click="getSeaCar(1)">自动挡</a>
                        <a class="item-sea" :class="{'active':carActive==2}" @click="getSeaCar(2)">手动自挡</a>
                    </div>
                </div>

                <div class="brand-left-box">
                    <div class="item" v-for="(item,index) in yearArr" :class="{'active':chooseYear==item}" @click="chooseY(item)">{{item}}</div>
                </div>
                <div class="brand-right-box">
                    <div class="item car-year" @click="getCar(item)" v-for="(item,index) in carArr" :class="'c'+subTit(item.car_name)">
                        <div class="img-box">
                            <van-image class="img" lazy-load :src="img(item.series_thumb)">
                                <template v-slot:loading>
                                    <van-loading type="spinner" size="20"/>
                                </template>
                            </van-image>
                        </div>
                        <div class="item-right">
                            <div class="right-tit">{{item.car_name}}&nbsp;{{item.car_case}}</div>
                            <div class="right-price">新车价：{{item.series_max}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</template>

<script>
    export default {
        name: "SearchCar",
        components: {},
        data() {
            return {
                keyword: "",
                active: 1,

                hotBrand: [],
                firstArr: [],

                carBrand: [],
                carSeries: [], //车系ID
                carSeries_id: 0, //车系ID
                car: [], //车ID

                list: [],
                seriesArr: [],
                carArr: [],

                yearArr:[],
                chooseYear:0,

                types: this.type | 0,
                addTypes: this.addType | 0,
                carActive: 0,
            }
        },
        props: ['type', 'addType'],
        computed: {},
        mounted: function () {
            this.init();
            window.history.pushState(null,null,'#');
            var that=this;
            window.addEventListener("popstate",e=>{
                if(that.active>1){
                    that.active-=1;
                }else{
                    that.cancel();
                }
            },false);
        },
        beforeDestroy(){
            var that=this;
            window.addEventListener("popstate",e=>{
                if(that.active>1){
                    that.active-=1;
                }else{
                    that.cancel();
                }
            },false);
        },
        methods: {
            init() {
                this.$api.car.getBrand().then(res => {
                    var res = res.data;

                    this.list = res.data.list;

                    const re = new Map();
                    this.firstArr = this.list.filter((arr) => !re.has(arr.brand_first) && re.set(arr.brand_first, 1))

                    this.hotBrand=res.data.hot;
                });

                var wHeight=$(window).height();
                var topHeight=$("#nbox").height();
                $(".search-carv2-box").height(wHeight-topHeight);
            },
            back() {
                var data = {
                    carBrand: this.carBrand,
                    carSeries: this.carSeries,
                    car: this.car,
                };
                window.scrollTo(0, 0);
                this.$emit('seaData', data);
            },
            cancel() {
                window.scrollTo(0, 0);
                this.$emit('cancel');
            },

            getCarList(item) {
                this.carBrand = item;
                this.active = 2;
                this.seriesArr=[];

                this.$api.car.getSeries({id: item.brand_id, type: this.addTypes}).then(res => {
                    var res = res.data;

                    this.seriesArr = res.data;
                });
                window.history.pushState(null,null,'#');
            },
            getCarID(id, item) {
                this.active = 3;
                this.carArr=[];
                this.yearArr=[];
                this.carSeries=[];
                this.carActive=0;
                if (this.types == 1) {
                    this.carSeries = item;
                    this.back();
                    return false;
                }

                this.carSeries_id = item.series_id;

                this.$api.car.getCar({id: item.series_id}).then(res => {
                    var res = res.data;

                    if (res.data.length > 0) {
                        this.carArr = res.data;
                    } else {
                        this.carArr = [];
                        this.car = [];
                        this.back();
                    }

                });
                window.history.pushState(null,null,'#');
                this.carSeries = item;
            },

            getSeaCar(index) {

                this.carActive = index;
                if(index==0){
                    this.chooseYear=0;
                    $(".car-year").show();
                }

                this.$api.car.getCar({id: this.carSeries_id, type: index}).then(res => {
                    var res = res.data;

                    if (res.data.length > 0) {
                        this.carArr = res.data;
                    } else {
                        this.carArr = [];
                        this.car = [];
                    }

                });
            },

            getCar(item) {
                this.car = item;
                this.back();
            },

            search() {
                this.$api.car.getBrand(this.keyword).then(res => {
                    var res = res.data;

                    this.list = res.data.list;

                    const re = new Map();
                    this.firstArr = this.list.filter((arr) => !re.has(arr.brand_first) && re.set(arr.brand_first, 1))

                });
            },

            /**
             * 截取年份
             * @param tit
             * @returns {*}
             */
            subTit(tit){
                var that=this;
                var index=tit.indexOf('款');
                if(index!=-1){
                    var year=tit.substr(index-4,4);
                    if(that.yearArr.indexOf(year)==-1){
                        that.yearArr.push(year);
                    }

                    return year;
                }else{
                    return "";
                }
            },

            /**
             * 选择年份
             */
            chooseY(y){
                this.chooseYear=y;
                $(".car-year").hide();
                $(".c"+y).show();
            },

            /**
             * 首字母跳转
             * @param j
             */
            jumps(j){
                document.querySelector("#"+j).scrollIntoView(true);
            },

            checkChoose(index){
                if(index==2 && this.carBrand.brand_id!=undefined){
                    this.active=index
                }
                if(index==3 && this.carSeries.series_id!=undefined){
                    this.active=index
                }
            },

        },
    }
</script>
<style lang="scss">
    @import "../assets/scss/core/base";

    .search-car-type {
        @include wh(564px, 82px);
        margin: 30px auto 0 auto;

        @include justify;

        .item {
            border: 2px solid #fff;
            color: #fff;
            font-size: 35px;
            @include wh(82px, 82px, 82px);
            box-sizing: border-box;
            text-align: center;
            border-radius: 100%;
            position: relative;

            &.active {
                background: #fff;
                color: #2C8DFF;
                font-weight: bold;

                .item-child {
                    opacity: 1;
                }

                &:after {
                    content: "";
                    display: block;
                    @include wh(26px, 19px);
                    background: url("../assets/images/icon/jian_white.png");
                    background-size: 100% 100%;
                    position: absolute;
                    left: 50%;
                    margin-left: -15px;
                    bottom: -132px
                }
            }

            .item-child {
                @include wh(auto, 46px, 46px);
                border-radius: 8px;
                border: 2px solid #fff;
                color: #fff;
                padding: 0 12px;
                font-size: 28px;
                position: absolute;
                left: -30px;
                white-space: nowrap;
                bottom: -74px;
                opacity: 0;
            }
        }

        .hr {
            @include wh(158px, 41px);
            border-bottom: 2px solid #fff;
        }
    }

    .search-carv2-box {
        @include wh(auto, 965px);
        background: #fff;
        padding-top: 30px;
        margin: 0 42px 0 42px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;

        .carv2-brand-box {
            @include wh(100%, auto);
            min-height: 100%;
            position: relative;
            margin-top: 30px;
            overflow: hidden;

            .box-title {
                @include wh(100%, 50px, 50px);
                background: #F2F2F2;
                box-sizing: border-box;
                padding: 0 39px;
                font-size: 24px;
            }

            .carv2-brand {
                @include wh(100%, auto);
                padding-bottom: 59px;
                overflow: hidden;

                .item {
                    @include wh(25%, auto);
                    text-align: center;
                    margin-top: 54px;
                    float: left;

                    .item-img {
                        @include wh(100%, auto);
                        margin-bottom: 20px;
                        font-size: 24px;

                        .img {
                            @include wh(auto, 58px);
                        }
                        .img-car {
                            @include wh(120px, 93px);
                            border-radius: 8px;
                            overflow: hidden;
                        }
                    }

                    .tit {
                        @include wh(100%, 31px, 31px);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        padding: 0 10px;
                        box-sizing: border-box;
                    }
                }
            }

            .box-first {
                @include wh(42px, 965px);
                position: fixed;
                background: rgba(200, 200, 200, .5);
                right: 0;
                top: 368px;
                text-align: center;
                font-size: 22px;
                padding-top: 10px;
                color: #fff;
                box-sizing: border-box;

                .item {
                    padding: 5px 0;
                    display: block;
                    color: #fff;
                }
            }

            .brand-left-box {
                @include wh(114px, 100%);
                position: absolute;
                left: 0;
                top: 80px;
                background: #C8C8C8;
                box-sizing: border-box;
                padding-top: 18px;

                .item {
                    @include wh(100%, 65px, 65px);
                    text-align: center;
                    font-size: 30px;
                    margin-top: 20px;

                    &.active {
                        background: #686868;
                        color: #fff;
                    }
                }
            }
            .brand-right-box {
                @include wh(520px, auto);
                margin-left: 125px;
                overflow: hidden;
                display: table;

                .item {
                    @include wh(100%, auto);
                    box-sizing: border-box;
                    padding: 30px 19px;
                    border-radius: 22px;
                    border: 2px solid #C8C8C8;
                    margin-top: 20px;
                    overflow: hidden;

                    .img-box {
                        @include wh(120px, 120px);
                        border-radius: 8px;
                        overflow: hidden;
                        justify-content: center;
                        align-items: center;
                        display: flex;
                        float: left;

                        .img {
                            max-height: 100%;
                        }
                    }
                    .item-right {
                        float: left;
                        @include wh(340px, auto);
                        margin-left: 15px;

                        .right-tit {
                            @include wh(100%, auto, 35px);
                            font-size: 28px;
                        }
                        .right-price {
                            font-size: 26px;
                            color: #2C8DFF;
                            margin-top: 10px;
                        }
                    }
                }
            }
        }
    }
</style>